<template>
  <div class="page">
    <VueHeader/>
    <div class="mainBody vh-center">
      <div class="left-area">
        <SelfInfo></SelfInfo>
        <TagList></TagList>
      </div>
      <div class="right-area">
        <template v-for="(article, index) in article_list">
          <article-summary :key="index" v-bind="article"/>
        </template>
      </div>
    </div>
    <VueFooter/>
  </div>
</template>

<script>
import VueHeader from '../../components/header';
import NavigationBar from '../../components/navigation';
import VueFooter from '../../components/footer';
import ArticleSummary from '../../components/article_summary';
import SelfInfo from '../../components/self_info';
import TagList from '../../components/tag_list';
import ArticleApi from './model/api';

export default {
  name: 'HOME',
  data () {
    return {
      article_list: [],
    };
  },
  async mounted () {
    const data = await ArticleApi.getArticle();
    console.log(data);
    this.article_list = data;
  },
  components: { // 注册组件，凡是要用到的组件都需要在这里注册
    VueHeader,
    TagList,
    SelfInfo,
    NavigationBar,
    ArticleSummary,
    VueFooter,
  },
};
</script>
<style src="./style.scss" lang="scss" scoped></style>
